<!-- todo 提示优化   <el-table-column type="selection" width="55"></el-table-column>-->
<template>
  <public-dialog
    v-model="dialogTableVisible"
    @confirmDialog="doSubmit"
    :before-close="closeDialog"
    title="展示列选取"
  >
    <el-table
      :data="gridData"
      ref="multipleTableRef"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column :selectable="isEditable" type="selection" width="55"></el-table-column>
      <el-table-column property="label" label="列名" show-overflow-tooltip />
    </el-table>
  </public-dialog>
</template>

<script setup>
import { ref, watch, onMounted, getCurrentInstance, nextTick } from "vue";
import "../style/pubTablecss.scss";
let { proxy } = getCurrentInstance();
//props
const props = defineProps({
  //是否显示
  tableData: {
    type: Object,
    default: {},
  },
});

const isEditable = (row,index)=>{
  // console.log(111,row,index);
  let bool = true;
  if(row.props == 'caozuo' || row.props == 'index'){
    bool = false;
  }
  return bool;
}

const handleSelectionChange = (e) => {
  //   console.log(789, e);
};

const gridData = ref([]);
var multipleTableRef = ref();

const dialogTableVisible = ref(false);
const emits = defineEmits(["closeShowedDialog", "changeTabelData"]);
const closeDialog = () => {
	emits("closeShowedDialog");
};
const doSubmit = (type) => {
  console.log("close type", type);
	if (type === "cancel") {
		emits("closeShowedDialog");
		return;
	}
	emitFixNow();
};

const emitFixNow = () => {
  /* JSON.parse(JSON.stringify(））会导致深层次引用丢失 render  */
  // let clumsObj = JSON.parse(JSON.stringify(props.tableData.clums));
  let clumsObj = props.tableData.clums;
  let checkedRow = multipleTableRef.value.getSelectionRows();
  console.log("clumsObj", clumsObj, "checkedRow", checkedRow);
  clumsObj.forEach((item) => {
    if (checkedRow.filter((check) => check.props == item.props).length == 0) {
      item["hide"] = true;
    }else{
      delete item["hide"];
    }
  });
  // console.log("result", clumsObj);
  emits("changeTabelData", clumsObj);
};

const loadSelect = async () => {
  await nextTick();
  if (multipleTableRef.value) {
    gridData.value.forEach((item) => {
      if (!item.hide) {
        /*        todo传入空列表是否会报错 */
        //   console.log('multipleTableRef.value', multipleTableRef.value);
        multipleTableRef.value.toggleRowSelection(item);
      }
    });
  }

  console.log("props.tableData.clums", props.tableData.clums);
};

onMounted(() => {
  if (props.tableData) {
    dialogTableVisible.value = true;
    //默认所有列都可作显示/隐藏
    gridData.value = props.tableData.clums;
    // console.log('props.tableData.clums', props.tableData.clums);

    loadSelect();
  } else {
  }
});
</script>

<style lang="scss" scoped></style>
